<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="bootstrap/js/jquery-3.1.1.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" type="" href="css/index.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>

<body>
    <div class="header">
        <div id="header">
            <ul>
                <li><a href="javascript:;">小米商城</a> | </li>
                <li><a href="javascript:;">MUI</a> | </li>
                <li><a href="javascript:;">米聊</a> | </li>
                <li><a href="javascript:;">游戏</a> | </li>
                <li><a href="javascript:;">多看阅读</a> | </li>
                <li><a href="javascript:;">云服务</a> | </li>
                <li><a href="javascript:;">金融</a> | </li>
                <li><a href="javascript:;">小米商城移动版</a> | </li>
                <li><a href="javascript:;">问题反馈</a> | </li>
                <li><a href="javascript:;">Select Region</a></li>
            </ul>
            <ul>
                <li><a href="javascript:;">登录</a> |</li>
                <li><a href="javascript:;">注册</a> |</li>
                <li><a href="javascript:;">消息通知</a></li>
                <li class="next"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车(0)</li>
            </ul>
        </div>
        <div class="content">
            <div id="parent"></div>
            <div class="parent"></div>
        </div>
    </div>


    <section id="nav">
        <img src="img/1121.png" alt="">
        <img src="img/title_logo.gif" alt="">
        <ul class="topul">
            <li><a href="javascript:;">小米手机</a></li>
            <li><a href="javascript:;">红米</a></li>
            <li><a href="javascript:;">平板·笔记本</a></li>
            <li><a href="javascript:;">电视</a></li>
            <li><a href="javascript:;">盒子·影音</a></li>
            <li><a href="javascript:;">路由器</a></li>
            <li><a href="javascript:;">智能硬件</a></li>
            <li><a href="javascript:;">服务</a></li>
            <li><a href="javascript:;">社区</a></li>
        </ul>
        <div class="input-group">
            <input type="text" class="form-control index" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </span>
        </div>
        <div class="listbox">
        <div class="last">
            <figure>
                <img src="tp/mi5c_320x220.jpg" alt="">
                <figcaption>
                    <p>小米手机5C</p>
                    <span>1499元起</span>
                </figcaption>
            </figure>
            <figure>
                <img src="tp/bijiben32012.5!160x110.jpg" alt="">
                <figcaption>
                    <p>小米手机5C</p>
                    <span>1499元起</span>
                </figcaption>
            </figure>
            <figure>
                <img src="tp/mi5c_320x220.jpg" alt="">
                <figcaption>
                    <p>小米手机5C</p>
                    <span>1499元起</span>
                </figcaption>
            </figure>
            <figure>
                <img src="tp/mipad2-16!160x110.jpg" alt="">
                <figcaption>
                    <p>小米手机5C</p>
                    <span>1499元起</span>
                </figcaption>
            </figure>
            <figure>
                <img src="tp/hezi3s!160x110.jpg" alt="">
                <figcaption>
                    <p>小米手机5C</p>
                    <span>1499元起</span>
                </figcaption>
            </figure>
        </div>
        </div>
    </section>


<script>
    var last1=[
        'tp/101848.png',
        'tp/101855xin.png',
        'tp/101860xin.png',
        'tp/101865.png',
        'tp/bijiben320!160x110.jpg'
    ]
    var last2=[
        'tp/101855xin.png',
        'tp/101860xin.png',
        'tp/101848.png',
        'tp/bijiben320!160x110.jpg',
        'tp/101865.png',
    ]
    var last3=[
        'tp/65yingyuan.png',
        'tp/70dianshi.png',
        'tp/320x220.png',
        'tp/wrj4k320.png',
        'tp/putonban!160x110.jpg',
    ]
    $('#nav .topul li').mouseover(function(){
        var index=$(this).index()
        console.log(index)
        if($(this).index()==1){
            for(var i=0;i<6;i++){
                $('.last').find('img').eq(i).attr('src',last1[i])
            }
        }
        if($(this).index()==2){
            for(var i=0;i<6;i++){
                $('.last').find('img').eq(i).attr('src',last2[i])
            } 
        }
        if($(this).index()==3){
            for(var i=0;i<6;i++){
                $('.last').find('img').eq(i).attr('src',last3[i])
            } 
        }
    })
</script>




    <div id="banner-tab" class="flexslider">
        <div class="boxxx">


            <div class="left-lb">
                <ul class="letf-ul">
                    <li>手机 电话卡<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>笔记本 平板<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>电视 盒子<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>路由器 智能硬件<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>移动电源 电池 插线板<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>耳机 音响<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>保护套 贴膜<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>线材 支架 储存卡<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>箱包 服饰<span class="glyphicon glyphicon-chevron-right"></span></li>
                    <li>米兔 周边服务<span class="glyphicon glyphicon-chevron-right"></span></li>
                </ul>
                <div id="right-ul">
                    <div class="yi">
                        <ul>
                            <li>
                                <img src="img/5c_80.png" alt="">
                                <span>小米手机5C</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/hm4-80.jpg" alt="">
                                <span>小米NOTE2</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li style="width: 249px;">
                                <img src="" alt="">
                                <span>小米移动 电话卡</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/hmn4x80.png" alt="">
                                <span>小米MIX</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/hm4A-80.jpg" alt="">
                                <span>小米5S</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/hmnote4-80.jpg" alt="">
                                <span>小米5PULS</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/hmnote4-80.jpg" alt="">
                                <span>小米5</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/xm5-80.jpg" alt="">
                                <span>红米NOTE4X</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/xmNOTE2-80.jpg" alt="">
                                <span>红米NOTE4</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/hmnote4-80.jpg" alt="">
                                <span>红米4</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/xm5s-80.jpg" alt="">
                                <span>红米4X</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="img/xm5-80.jpg" alt="">
                                <span>红米4A</span>
                                <a href="javascript:;">选购</a>
                            </li>
                            <li>
                                <img src="" alt="">
                                <span>对比手机</span>
                                <a href="javascript:;">选购</a>
                            </li>
                        </ul>
                    </div>
                    <div class="er">
                        <ul>
                            <li><img src="img/bijiben80.jpg" alt=""><span>小米笔记本Air</span><a href="javascript:;">选购</a></li>
                            <li><img src="img/pad2.png" alt=""><span>小米平板2</span><a href="javascript:;">选购</a></li>
                            <li><img src="img/usbzjqggg80.jpg" alt=""><span>USB-C转接器</span></li>
                            <li><img src="img/neidanbao80.jpg" alt=""><span>小米笔记本内胆包</span></li>
                            <li><img src="img/shubiao80.jpg" alt=""><span>小米便携鼠标</span></li>
                        </ul>
                    </div>
                    <div class="san">
                        <ul>
                            <li><img src="img/553s80.png" alt=""><span>小米电视3s 48英寸</span></li>
                            <li><img src="img/653s80.png" alt=""><span>小米电视3s 50英寸</span></li>
                            <li style="width: 249px;"><img src="img/shb.jpg" alt=""><span>蓝牙手柄</span></li>
                            <li><img src="img/6580side.jpg" alt=""><span>小米电视3s 55英寸</span></li>
                            <li><img src="img/018080.png" alt=""><span>小米电视3s 60英寸</span></li>
                            <li style="width: 249px;"><img src="img/znyjdaohang.jpg" alt=""><span>家庭音响</span></li>
                            <li><img src="img/tv70.png" alt=""><span>小米电视3s 65英寸 曲面</span></li>
                            <li><img src="img/tv60.jpg" alt=""><span>小米电视3 60英寸</span></li>
                            <li style="width: 249px;"><img src="img/80x80.jpg" alt=""><span>电视盒子配件</span></li>
                            <li><img src="img/018080.png" alt=""><span>小米电视3 70英寸</span></li>
                            <li><img src="img/hezi80-80.jpg" alt=""><span>小米盒子3s</span></li>
                            <li><img src="img/hezizengqiangban80side.jpg" alt=""><span>小米盒子3c</span></li>
                            <li><img src="img/scale.jpg" alt=""><span>小米盒子3 增强版</span></li>
                            <li><img src="img/suishen-80.jpg" alt=""><span>小米盒子 mini</span></li>
                            <li><img src="img/xiaogangpao2-hei-80.jpg" alt=""><span>小米低音炮</span></li>
                        </ul>
                    </div>
                    <div class="si">
                        <ul>
                            <li><img src="img/jiqiren.jpg" alt=""><span>米家扫地机器人及配件</span></li>
                            <li><img src="img/czjhq80.jpg" alt=""><span>米家车载空气净化器</span></li>
                            <li><img src="img/xueyaji-80.jpg" alt=""><span>血压计</span></li>
                            <li><img src="img/scale.jpg" alt=""><span>体重秤</span></li>
                            <li><img src="img/dianshipeijian.jpg" alt=""><span>小米VR眼镜</span></li>
                            <li><img src="img/dianhuashoubiao80.jpg" alt=""><span>手表</span></li>
                            <li><img src="img/jiqiren80.jpg" alt=""><span>米兔积木机器人</span></li>
                            <li><img src="img/huabanche80.jpg" alt=""><span>电动滑板车</span></li>
                            <li><img src="img/luyouqi-80.jpg" alt=""><span>小米路由器</span></li>
                            <li><img src="img/dianfanbao-80.jpg" alt=""><span>米家智能电饭煲</span></li>
                            <li><img src="img/zhinengdeng-80.jpg" alt=""><span>节能灯</span></li>
                            <li><img src="img/wurenji80.jpg" alt=""><span>小米无人机</span></li>
                            <li><img src="img/scooter.jpg" alt=""><span>九号平衡车</span></li>
                            <li><img src="img/xiaobai80.jpg" alt=""><span>智能摄像机</span></li>
                            <li><img src="img/gushiji80.jpg" alt=""><span>米兔智能故事机</span></li>
                            <li><img src="img/znyjdaohang.jpg" alt=""><span>米家行车记录仪</span></li>
                            <li><img src="img/zxc80-80.jpg" alt=""><span>电动折叠自行车</span></li>
                            <li><img src="img/jinghuaqilvxin80.jpg" alt=""><span>净化器及滤芯</span></li>
                            <li><img src="img/znyjdaohang.jpg" alt=""><span>智能家庭组合</span></li>
                            <li><img src="img/yidongdianyuan.jpg" alt=""><span>小米米家对讲机</span></li>
                            <li><img src="img/zhinengjiatingtaozhuang-80.jpg" alt=""><span>小米恒温电水壶</span></li>
                            <li><img src="img/jingshuiqiandlvxin-80.jpg" alt=""><span>净水器及滤芯</span></li>
                            <li><img src="img/shouhuan280.jpg" alt=""><span>手环及配件</span></li>
                            <li><img src="img/mituyinx80.jpg" alt=""><span>全部智能硬件</span></li>
                        </ul>
                    </div>
                    <div class="wu">
                        <ul>
                            <li><img src="img/baohu.jpg" alt=""><span>小米移动电源</span></li>
                            <li style="width: 249px;"><img src="img/7Battery1.jpg" alt=""><span>彩虹7号电池</span></li>
                            <li><img src="img/c1xb343.jpg" alt=""><span>插线板</span></li>
                            <li><img src="img/dianyuan280.jpg" alt=""><span>品牌移动电源</span></li>
                            <li><img src="img/chechong1.jpg" alt=""><span>移动电源附件</span></li>
                            <li><img src="img/dianyuanfujian.jpg" alt=""><span>充电器</span></li>
                            <li><img src="img/5Battery1.jpg" alt=""><span>彩虹5号电池</span></li>
                        </ul>
                    </div>
                    <div class="liu">
                        <ul>
                            <li><img src="img/toudai80.jpg" alt=""><span>小米头戴式耳机</span></li>
                            <li><img src="img/bluetoothheadset.jpg" alt=""><span>小米蓝牙耳机</span></li>
                            <li><img src="img/xiaogangpao2-hei-80.jpg" alt=""><span>小钢炮音箱2</span></li>
                            <li><img src="img/tdsqs80.jpg" alt=""><span>头戴式耳机轻松版</span></li>
                            <li><img src="img/yundong80.jpg" alt=""><span>小米运动蓝牙耳机</span></li>
                            <li><img src="img/diyinpao.jpg" alt=""><span>小米方盒子音响</span></li>
                            <li><img src="img/quantie.jpg" alt=""><span>小米全铁耳机 Pro</span></li>
                            <li><img src="img/huosai1.jpg" alt=""><span>品牌耳机</span></li>
                            <li><img src="img/naozhong80.jpg" alt=""><span>小米音乐闹钟</span></li>
                            <li><img src="img/jiaonang80.jpg" alt=""><span>小米全铁耳机</span></li>
                            <li><img src="img/shuihu80.jpg" alt=""><span>小米网络音响</span></li>
                            <li><img src="img/mituyinx80.jpg" alt=""><span>小米米兔音响</span></li>
                            <li><img src="img/qtpro80.jpg" alt=""><span>小米胶囊耳机</span></li>
                            <li><img src="img/suishen-80.jpg" alt=""><span>小米蓝牙音响</span></li>
                            <li><img src="img/chechong1.jpg" alt=""><span>音乐蓝牙车充</span></li>
                            <li><img src="img/pinpai80.jpg" alt=""><span>小米活塞耳机清新版</span></li>
                            <li><img src="img/pocketaudio.png" alt=""><span>小米随身蓝牙音响</span></li>
                        </ul>
                    </div>
                    <div class="qi">
                        <ul>
                            <li><img src="img/tiemo.jpg" alt=""><span>贴膜</span></li>
                            <li><img src="img/baohu.jpg" alt=""><span>保护套/保护壳</span></li>
                        </ul>
                    </div>
                    <div class="ba">
                        <ul>
                            <li><img src="img/jly80.jpg" alt=""><span>线材</span></li>
                            <li><img src="img/zhinengdeng-80.jpg" alt=""><span>自拍杆</span></li>
                            <li><img src="img/zhinengjiatingtaozhuang-80.jpg" alt=""><span>手机支架</span></li>
                            <li><img src="img/yundong80.jpg" alt=""><span>储存卡</span></li>
                        </ul>
                    </div>
                    <div class="jiu">
                        <ul>
                            <li><img src="img/laovr80.jpg" alt=""><span>箱包</span></li>
                            <li><img src="img/usbzjqggg80.jpg" alt=""><span>90分旅行箱包</span></li>
                            <li><img src="img/zxc80-80.jpg" alt=""><span>服饰</span></li>
                        </ul>
                    </div>
                    <div class="shi">
                        <ul>
                            <li><img src="img/mituyinx80.jpg" alt=""><span>米兔玩偶</span></li>
                            <li><img src="img/tiemo.jpg" alt=""><span>鼠标垫</span></li>
                            <li><img src="img/shb.jpg" alt=""><span>生活周边</span></li>
                            <li><img src="img/scale.jpg" alt=""><span>《小米》会刊</span></li>
                            <li><img src="img/shubiao80.jpg" alt=""><span>8H乳胶枕</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="slideBox">
            <ul class="slides">
                <li class="active"><img src="tp/01.jpg"></li>
                <li><img src="tp/02.jpg"></li>
                <li><img src="tp/03.jpg"></li>
                <li><img src="tp/04.jpg"></li>
                <li><img src="tp/05.jpg"></li>
            </ul>
        </div>
        <script>
            var timers=setInterval(func,3000)
            var i=0
            function func(){
                // console.log(i)  
                $('.slides').find('li').eq(i).addClass('active').siblings().removeClass('active')
                 i++
                if(i>$('.slides').find('li').length-1){
                    i=0
                }              
            }
        </script>
        <div class="btnn">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="glyphicon glyphicon-chevron-right"></span>
        </div>
    </div>

    <section class="sec">
        <ul>
            <li>
                <span>选购手机</span>
                <span>企业团购</span>
                <span>一元活动</span>
                <span>小米移动</span>
                <span>以旧换新</span>
                <span>话费充值</span>
            </li>
            <li><img src="img/a.jpg" alt=""></li>
            <li><img src="img/b.jpg" alt=""></li>
            <li><img src="img/c.jpg" alt=""></li>
        </ul>
    </section>
    <h2>小米明星单品</h2>
    <div id="left-right">
        <div class="ctrl"><span class="glyphicon glyphicon-chevron-left ll1 no"></span><span class="glyphicon glyphicon-chevron-right rr1"></span></div>
    </div>
    <section class="mxdp">
        <div class="box">
            <figure style="border-top:1px solid darkorange;"><img src="img/12.jpg" alt="">
                <function>
                    <p>小米5s Plus</p>
                    <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                    <span>2299元起</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid lightgreen;"><img src="img/13.jpg" alt="">
                <function>
                    <p>小米电视3s 55英寸</p>
                    <small>人工智能电视，4K大屏新旗舰</small><br>
                    <span>3999元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid darkblue;"><img src="tp/17fc57e5-e332-4452-bba4-ef341f6e59fd.png" alt="">
                <function>
                    <p>小米移动电源2</p>
                    <small>双向快充，高密度锂聚化合物电芯</small><br>
                    <span>79元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid darkred;"><img src="img/15.jpg" alt="">
                <function>
                    <p>小米手环2</p>
                    <small>OLED显示屏幕，升级计步算法</small><br>
                    <span>149元</span>
                </function>
                </img>
            </figure>
            <figure  style="border-top:1px solid deepskyblue;;"><img src="tp/T1KvdjBX_v1RXrhCrK.jpg" alt="">
                <function>
                    <p>小米净水器 厨下式</p>
                    <small>直出纯净水，隐藏式安装</small><br>
                    <span>1999元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid blueviolet;"><img src="img/17.jpg" alt="">
                <function>
                    <p>米家LED智能台灯</p>
                    <small>无可视频闪，亮度色温无级调节</small><br>
                    <span>169元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid brown;"><img src="img/18.jpg" alt="">
                <function>
                    <p>米家iHealth血压计</p>
                    <small>爸妈上手就会的智能血压计</small><br>
                    <span>399元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid olivedrab"><img src="img/19.jpg" alt="">
                <function>
                    <p>小米路由器3</p>
                    <small>更快更强，不止四天线</small><br>
                    <span>149元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid darksalmon;"><img src="tp/555.png" alt="">
                <function>
                    <p>小米活塞耳机 清新版</p>
                    <small>铝合金音腔，第三代平衡阻尼系统</small><br>
                    <span>299元</span>
                </function>
                </img>
            </figure>
            <figure style="border-top:1px solid thistle;"><img src="img/20.jpg" alt="">
                <function>
                    <p>小米体重称</p>
                    <small>100克，喝杯水都可感知的精准</small><br>
                    <span>99元</span>
                </function>
                </img>
            </figure>
        </div>
    </section>
    <main>
        <h2 class="h2">智能硬件</h2>
        <div class="ck">
            <div><span>产看全部</span><span class="glyphicon glyphicon-circle-arrow-right"></span></div>
        </div>
        <div id="znyj">
            <div class="top">
                <figure id="big">
                    <img src="img/38e26bb4-bc07-424f-aa3d-540f2c80e073.jpg" alt="">
                </figure>
                <figure>
                    <span class="green">新品</span><br>
                    <img src="img/pms_1488338229.6467773!220x220.jpg" alt="">
                    <figcaption>
                        <p>米家行车记录仪</p>
                        <small>晚上能拍清车牌的行车记录仪</small>
                        <br>
                        <span>349元</span>
                    </figcaption>
                </figure>
                <figure>
                    <br>
                    <img src="img/T1zBYgBCWv1RXrhCrK!220x220.jpg" alt="">
                    <figcaption>
                        <p>小米空气净化器</p>
                        <small>高效除霾，十分钟换新房间空气</small>
                        <br>
                        <span>699元</span>
                    </figcaption>
                </figure>
                <figure>
                    <br>
                    <img src="img/pms_1464615180.86261317!220x220.jpg" alt="">
                    <figcaption>
                        <p>米兔智能故事机</p>
                        <small>微信远程互动，智能语音交互</small>
                        <br>
                        <span>199元</span>
                    </figcaption>
                </figure>
                <figure>
                    <br>
                    <img src="img/pms_1479367293.94368573!220x220.jpg" alt="">
                    <figcaption>
                        <p>米兔儿童手表Q</p>
                        <small>11重安全设计，5重精准定位</small>
                        <br>
                        <span>299元</span>
                    </figcaption>
                </figure>
            </div>
            <div class="bottom">
                <figure>
                    <br>
                    <img src="img/pms_1468806372.46368911!220x220.jpg" alt="">
                    <figcaption>
                        <p>米家小白智能摄像机</p>
                        <small>360°全景拍摄，1080P高清摄像</small>
                        <br>
                        <span>399元</span>
                    </figcaption>
                </figure>
                <figure>
                    <br>
                    <img src="img/pms_1482392549.50965908!220x220.jpg" alt="">
                    <figcaption>
                        <p>米家车载空气净化器</p>
                        <small>双风机循环气流，高效净化车内空气</small>
                        <br>
                        <span>449元</span>
                    </figcaption>
                </figure>
                <figure>
                    <span class="green">新品</span><br>
                    <img src="img/pms_1488275235.31765367!220x220.jpg" alt="">
                    <figcaption>
                        <p>米家骑记电助力折叠自行车</p>
                        <small>力矩传感电助力，让城市出行轻松有趣</small>
                        <br>
                        <span>2999元</span>
                    </figcaption>
                </figure>
                <figure>
                    <span class="green">新品</span><br>
                    <img src="img/pms_1488272686.62666302!220x220.jpg" alt="">
                    <figcaption>
                        <p>小米米家电动滑板车</p>
                        <small>极简几何设计，一分钟轻松上手</small>
                        <br>
                        <span>1999元</span>
                    </figcaption>
                </figure>
            </div>
        </div>
        <h2 class="hh">搭配</h2>
        <div class="ck kc">
            <div><a href="javascript:;">热门</a>
                <a href="javascript:;">耳机音响</a>
                <a href="javascript:;">电源</a>
                <a href="javascript:;">电池储存卡</a></div>
        </div>
        <div class="dapei">
            <div class="left-tp">
                <figure>
                    <img src="img/4c60cabb-d2c4-4fb6-bb06-3b35a8265932.jpg" alt="">
                </figure>
                <figure>
                    <img src="img/21dc127c-77ad-48fb-b7c1-bf382a711221.jpg" alt="">
                </figure>
            </div>
            <div class="right-tp">
                <ul>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1481098212.65597197!220x220.jpg" alt="">
                            <figcaption>
                                <p>ROIDMI音乐蓝牙车充</p>
                                <span>99元</span>
                                <br>
                                <small>508人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1484034162.02747540!220x220.jpg" alt="">
                            <figcaption>
                                <p>小米USB充电器(两口)</p>
                                <span>49元</span>
                                <br>
                                <small>2267人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T1xxVTBghv1RXrhCrK!220x220.jpg" alt="">
                            <figcaption>
                                <p>彩虹5号电池(10粒装)</p>
                                <span>9.9元</span>
                                <br>
                                <small>9万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T178EjBjVT1RXrhCrK!220x220.jpg" alt="">
                            <figcaption>
                                <p>彩虹7号电池(10粒装)</p>
                                <span>9.9元</span>
                                <br>
                                <small>5.5万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T1vFEjBbWT1RXrhCrK!220x220.jpg" alt="">
                            <figcaption>
                                <p>小米USB充电器(4口)</p>
                                <span>69元</span>
                                <br>
                                <small>1.2万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T1PQWvBvAv1RXrhCrK!220x220.jpg" alt="">
                            <figcaption>
                                <p>SanDisk 32GB高速储存卡</p>
                                <span>69.9元</span>
                                <br>
                                <small>1万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T142A_BXEv1RXrhCrK!220x220.jpg" alt="">
                            <figcaption>
                                <p>小米车载充电器</p>
                                <span>49元</span>
                                <br>
                                <small>4.2万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li style="background-color: #fafafa">
                        <div>
                            <figure style="height: 142px;background-color: white">
                                <div>
                                    <p>SanDisk 16G...</p>
                                    <span>31.9元</span>
                                </div>
                                <img src="img/T1sRhTBsYT1RXrhCrK!220x220.jpg" alt="" style="width: 80px;height: 80px;">
                            </figure>
                        </div>
                        <div>
                            <figure style="height: 143px;background-color: white">
                                <div>
                                    <p>浏览更多</p>
                                    <span style="color: black;">电池储存卡</span>
                                </div>
                                <img src="img/156165.png" alt="" style="width: 40px;height: 40px;left:25px;">
                            </figure>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <!--配件-->
        <h2 class="hh">配件</h2>
        <div class="ck kc">
            <div><a href="javascript:;" class="men">热门</a>
                <a href="javascript:;" class="erji">耳机音响</a>
                <a href="javascript:;" class="dianyuan">电源</a>
                <a href="javascript:;" class="dianchi">电池储存卡</a></div>
        </div>
        <div class="dapei">
            <div class="left-tp">
                <figure>
                    <img src="img/0ff2c84c-d0e6-4232-b0fb-2cebefd1a207.jpg" alt="">
                </figure>
                <figure>
                    <img src="img/xmad_14870664354709_bVmjU.png" alt="">
                </figure>
            </div>
            <div class="right-tp">
                <ul>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T1XybgBjhT1RXrhCrK.jpg" alt="">
                            <figcaption>
                                <p>ROIDMI音乐蓝牙车充</p>
                                <span>99元</span>
                                <br>
                                <small>508人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1482221011.26064844!220x220.jpg" alt="">
                            <figcaption>
                                <p>小米USB充电器(两口)</p>
                                <span>49元</span>
                                <br>
                                <small>2267人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <span id="green">新品</span><br>
                            <img src="img/pms_1474430362.70018703.jpg" alt="">
                            <figcaption>
                                <p>彩虹5号电池(10粒装)</p>
                                <span>9.9元</span>
                                <br>
                                <small>9万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/T1t2K_B4L_1RXrhCrK.jpg" alt="">
                            <figcaption>
                                <p>彩虹7号电池(10粒装)</p>
                                <span>9.9元</span>
                                <br>
                                <small>5.5万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1482136306.7944683!220x220.jpg" alt="">
                            <figcaption>
                                <p>小米USB充电器(4口)</p>
                                <span>69元</span>
                                <br>
                                <small>1.2万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1482136335.88325212.jpg" alt="">
                            <figcaption>
                                <p>SanDisk 32GB高速储存卡</p>
                                <span>69.9元</span>
                                <br>
                                <small>1万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/HR1256.png" alt="">
                            <figcaption>
                                <p>小米车载充电器</p>
                                <span>49元</span>
                                <br>
                                <small>4.2万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li style="background-color: #fafafa">
                        <div>
                            <figure style="height: 142px;background-color: white">
                                <div>
                                    <p>SanDisk 16G...</p>
                                    <span>31.9元</span>
                                </div>
                                <img src="img/pms_1478679787.07226567.jpg" alt="" style="width: 80px;height: 80px;">
                            </figure>
                        </div>
                        <div>
                            <figure style="height: 143px;background-color: white">
                                <div>
                                    <p>浏览更多</p>
                                    <span style="color: black;">电池储存卡</span>
                                </div>
                                <img src="img/156165.png" alt="" style="width: 40px;height: 40px;left:25px;">
                            </figure>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <script>
            var ang=[
                'img/T1XybgBjhT1RXrhCrK.jpg',
                'img/pms_1482221011.26064844!220x220.jpg',
                'img/pms_1474430362.70018703.jpg',
                'img/T1t2K_B4L_1RXrhCrK.jpg',
                'img/pms_1482136306.7944683!220x220.jpg',
                'img/pms_1482136335.88325212.jpg',
                'img/HR1256.png',
            ]
            var ang1=[
                'img/pms_1481098202.44798045!220x220.jpg',
                'img/T1LqYgBCWv1RXrhCrK!220x220.jpg',
                'img/T1SkV_BCd_1RXrhCrK!220x220.jpg',
                'img/pms_1478510064.36397738!220x220.jpg',
                'img/T1A.A_BKYT1RXrhCrK!220x220.jpg',
                'img/pms_1481098202.44798045!220x220.jpg',
                'img/T1SkV_BCd_1RXrhCrK!220x220.jpg',
            ]
            var ang2=[
                'img/T1AcE_Bghv1RXrhCrK.jpg',
                'img/T1atV_BQLT1RXrhCrK!220x220.jpg',
                'img/T1XybgBjhT1RXrhCrK.jpg',
                'img/pms_1482816047.72829695.jpg',
                'img/pms_1481273468.72564539!220x220.jpg',
                'img/T1Ihd_BTCv1RXrhCrK.jpg',
                'img/T1jWWjBsET1RXrhCrK!220x220.jpg',
            ]
            var ang3=[
                'img/pms_1469410847.29693876!220x220.jpg',
                'img/pms_1482301662.61336109!220x220.jpg',
                'img/pms_1482321199.12589253.jpg',
                'img/pms_1478248721.42297795.jpg',
                'img/pms_1478510064.36397738!220x220.jpg',
                'img/T1A.A_BKYT1RXrhCrK!220x220.jpg',
                'img/pms_1482816047.72829695.jpg',
            ]
            $('.erji').mouseover(function(){
                for(var i=0;i<8;i++){
                    // var tt=$('.dapei').eq(1).find('.right-tp')
                    $('.dapei').eq(1).find('.right-tp').find('li').eq(i).find('img').attr('src',ang1[i])
                }
            })
            $('.men').mouseover(function(){
                for(var i=0;i<8;i++){
                    // var tt=$('.dapei').eq(1).find('.right-tp')
                    $('.dapei').eq(1).find('.right-tp').find('li').eq(i).find('img').attr('src',ang[i])
                }
            })
            $('.dianyuan').mouseover(function(){
                for(var i=0;i<8;i++){
                    // var tt=$('.dapei').eq(1).find('.right-tp')
                    $('.dapei').eq(1).find('.right-tp').find('li').eq(i).find('img').attr('src',ang2[i])
                }
            })
            $('.dianchi').mouseover(function(){
                for(var i=0;i<8;i++){
                    // var tt=$('.dapei').eq(1).find('.right-tp')
                    $('.dapei').eq(1).find('.right-tp').find('li').eq(i).find('img').attr('src',ang3[i])
                }
            })

            // if($(this).index()==2){
            // for(var i=0;i<6;i++){
            //     $('.last').find('img').eq(i).attr('src',last2[i])
            // } 
        // }
        </script>
        <!--周边-->
        <h2 class="hh">周边</h2>
        <div class="ck kc">
            <div><a href="javascript:;">热门</a>
                <a href="javascript:;">耳机音响</a>
                <a href="javascript:;">电源</a>
                <a href="javascript:;">电池储存卡</a></div>
        </div>
        <div class="dapei">
            <div class="left-tp">
                <figure>
                    <img src="img/xmad_14891310350201_zXBkj.jpg" alt="">
                </figure>
                <figure>
                    <img src="img/xmad_14877494013394_hRbYf.jpg" alt="">
                </figure>
            </div>
            <div class="right-tp">
                <ul>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1480477598.47892154!220x220.jpg" alt="">
                            <figcaption>
                                <p>ROIDMI音乐蓝牙车充</p>
                                <span>99元</span>
                                <br>
                                <small>508人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/pms_1465724476.99494960!220x220.jpg" alt="">
                            <figcaption>
                                <p>小米USB充电器(两口)</p>
                                <span>49元</span>
                                <br>
                                <small>2267人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <span id="org">免邮费</span><br>
                            <img src="img/4198498498.png" alt="">
                            <figcaption>
                                <p>彩虹5号电池(10粒装)</p>
                                <span>9.9元</span>
                                <br>
                                <small>9万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/5a28d943-ef5d-4920-a89a-7f1bce6c5b35.jpg" alt="">
                            <figcaption>
                                <p>彩虹7号电池(10粒装)</p>
                                <span>9.9元</span>
                                <br>
                                <small>5.5万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/44966.png" alt="">
                            <figcaption>
                                <p>小米USB充电器(4口)</p>
                                <span>69元</span>
                                <br>
                                <small>1.2万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <span id="org">免邮费</span><br>
                            <img src="img/pms_1482737297.53343760!220x220.jpg" alt="">
                            <figcaption>
                                <p>SanDisk 32GB高速储存卡</p>
                                <span>69.9元</span>
                                <br>
                                <small>1万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <br>
                            <img src="img/212365156.png" alt="">
                            <figcaption>
                                <p>小米车载充电器</p>
                                <span>49元</span>
                                <br>
                                <small>4.2万人评价</small>
                            </figcaption>
                            <div class="chonge">
                                <p></p>
                                <p></p>
                            </div>
                        </figure>
                    </li>
                    <li style="background-color: #fafafa">
                        <div>
                            <figure style="height: 142px;background-color: white">
                                <div>
                                    <p>SanDisk 16G...</p>
                                    <span>31.9元</span>
                                </div>
                                <img src="img/2030.png" alt="" style="width: 80px;height: 80px;">
                            </figure>
                        </div>
                        <div>
                            <figure style="height: 143px;background-color: white">
                                <div>
                                    <p>浏览更多</p>
                                    <span style="color: black;">电池储存卡</span>
                                </div>
                                <img src="img/156165.png" alt="" style="width: 40px;height: 40px;left:25px;">
                            </figure>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <h2 class="cc">为您推荐</h2>
        <div class="left-right2">
            <div class="box1"><span class="glyphicon glyphicon-chevron-left ll2"></span><span class="glyphicon glyphicon-chevron-right rr2"></span></div>
        </div>
        <section class="tj">
            <div class="box">
                <figure><img src="img/pms_1487928964.47473084.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1487928964.47473084.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1475052168.43877575.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1488268195.02396947.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/T1AcE_Bghv1RXrhCrK.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1481507050.2285518.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/2551959.png" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="tp/320x220.png" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1488275507.70154171.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/17.jpg" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/5964949.png" alt="">
                    <function>
                        <p>小米5s Plus</p>
                        <small>5.7英寸大屏双射手机，拍照黑科技</small><br>
                        <span>2299元起</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1477389928.07792706.jpg" alt="">
                    <function>
                        <p>小米电视3s 55英寸</p>
                        <small>人工智能电视，4K大屏新旗舰</small><br>
                        <span>3999元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1478678718.61531371.jpg" alt="">
                    <function>
                        <p>小米移动电源2</p>
                        <small>双向快充，高密度锂聚化合物电芯</small><br>
                        <span>79元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/15.jpg" alt="">
                    <function>
                        <p>小米手环2</p>
                        <small>OLED显示屏幕，升级计步算法</small><br>
                        <span>149元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1481269289.59498154.jpg" alt="">
                    <function>
                        <p>小米净水器 厨下式</p>
                        <small>直出纯净水，隐藏式安装</small><br>
                        <span>1999元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1481269289.59498154.jpg" alt="">
                    <function>
                        <p>米家LED智能台灯</p>
                        <small>无可视频闪，亮度色温无级调节</small><br>
                        <span>169元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1484272997.12298611.jpg" alt="">
                    <function>
                        <p>米家iHealth血压计</p>
                        <small>爸妈上手就会的智能血压计</small><br>
                        <span>399元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/pms_1479724763.43233402.jpg" alt="">
                    <function>
                        <p>小米路由器3</p>
                        <small>更快更强，不止四天线</small><br>
                        <span>149元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/5949449.png" alt="">
                    <function>
                        <p>小米活塞耳机 清新版</p>
                        <small>铝合金音腔，第三代平衡阻尼系统</small><br>
                        <span>299元</span>
                    </function>
                    </img>
                </figure>
                <figure><img src="img/T1CDbjBgAT1RXrhCrK!220x220.jpg" alt="">
                    <function>
                        <p>小米体重称</p>
                        <small>100克，喝杯水都可感知的精准</small><br>
                        <span>99元</span>
                    </function>
                    </img>
                </figure>
            </div>
        </section>

        <!--热评产品-->
        <h2 class="www">热评产品</h2>
        <section class="rp">
            <figure>
                <img src="img/62d44838-f464-4c11-887c-9168645ae797.jpg" alt="">
                <figcaption>
                    <p>这箱子很好，外观漂亮，实用性强。很轻，有点软但不影响它的坚固。</p>
                    <div>
                        <small>来自于 子书崖 的评价</small>
                        <p>90分旅行箱 20寸<span>299元</span></p>
                    </div>
                </figcaption>
            </figure>
            <figure>
                <img src="img/5165156156.png" alt="">
                <figcaption>
                    <p>样子好可爱，特别是转来转去时很有趣。让它休眠时它就会把头转过去背对着你了，唤醒它又会自动转回来。你叫...</p>
                    <div>
                        <small>来自于 随风 的评价</small>
                        <p>米家小白智能摄像机<span>399元</span></p>

                    </div>
                </figcaption>
            </figure>
            <figure>
                <img src="img/498498414.png" alt="">
                <figcaption>
                    <p>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
                    <div>
                        <small>来自于 yinyin1997 的评价</small>
                        <p>小米插线板<span>49元</span></p>

                    </div>
                </figcaption>
            </figure>
            <figure>
                <img src="img/4949684987498456.png" alt="">
                <figcaption>
                    <p>包装很让人感动，式样也很可爱，做出的饭全家人都爱吃，超爱五星！手机控制还是不太熟练，最主要是没有连接...</p>
                    <div>
                        <small>来自于 HZG 的评价</small>
                        <p>米家压力IH电饭煲<span>999元</span></p>
                    </div>
                </figcaption>
            </figure>
        </section>
        <h2 class="xie">内容</h2>
        <section class="nr">
            <div class="chang">
                <ul class="lol">
                    <li class="y1">
                        <p>图书</p>
                        <ul>
                            <li>
                                <h4>哈利波特与被诅咒的孩子</h4>
                                <p class="sm">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p>29.37元</p>
                                <img src="img/5e5da924-84e3-4959-9e25-5891cdf30757.jpg" alt="">
                            </li>
                            <li>
                                <h4>好吗好的</h4>
                                <p class="sm">畅销作家大冰2016年新书！讲给你听，好吗好的！</p>
                                <p>17.99元</p>
                                <img src="img/61e1385e-54de-48f3-8717-5e4f4b1cdd14.jpg" alt=""></li>
                            <li>
                                <p class="sm">海量好书，享受精品阅读时光<br>漂亮的中文排版，千万读者选择！</p>
                                <a href="javascript:;">前往多看阅读</a>
                                <img src="img/more-duokan.jpg" alt="">
                            </li>
                        </ul>
                        <div class="bbttnn" style="top:-170px;"><span class="glyphicon glyphicon-chevron-left clickleft"></span><span class="clickright glyphicon glyphicon-chevron-right"></span></div>
                    </li>
                    <li class="y2">
                        <p>MUI主题</p>
                        <ul>
                            <li>
                                <h4>小米5C尊黑版</h4>
                                <p class="sm">小米5c动态尊黑主题，首发上线！会动的默认壁纸</p>
                                <p>9米币</p>
                                <img src="img/xmad_14891320737036_vZAlk.jpg" alt="">
                            </li>
                            <li>
                                <h4>我心澎湃【烫金版】</h4>
                                <p class="sm">我心澎湃【烫金版】官方主题强势登场</p>
                                <p>9米币</p>
                                <img src="img/xmad_14891313177132_MIxOs.jpg" alt="">
                            </li>
                            <li>
                                <h4>遇见你 预见爱</h4>
                                <p class="sm">不要玫瑰，不要巧克力，不要甜言蜜语，只要敢说在一起。</p>
                                <p>13.14米币</p>
                                <img src="img/123156156561.png" alt="">
                            </li>
                            <li>
                                <p class="sm">众多个性主题、百变锁屏与自由桌面<br>让你的手机与众不同！</p>
                                <a href="">前往MUI主题市场</a>
                                <img src="img/more-miui.jpg" alt="">
                            </li>
                        </ul>
                        <div class="bbttnn" style="top:-170px;"><span class="clickleft1 glyphicon glyphicon-chevron-left"></span><span class="clickright1 glyphicon glyphicon-chevron-right"></span></div>
                    </li>
                    <li class="y3">
                        <p>游戏</p>
                        <ul>
                            <li>
                                <h4>米柚手游模拟器</h4>
                                <p class="sm">在电脑上玩遍小米所有手游</p>
                                <p>免费</p>
                                <img src="img/T1czW_BXCv1R4cSCrK.png" alt="">
                            </li>
                            <li>
                                <h4>剑侠世界</h4>
                                <p class="sm">一生不容错过的浪漫武侠！！</p>
                                <p>免费</p>
                                <img src="img/695c909b-f541-4575-bace-d08b6465025b.jpg" alt="">
                            </li>
                            <li>
                                <h4>老九门</h4>
                                <p class="sm">九门恩怨，盗墓笔记前传上线</p>
                                <p>免费</p>
                                <img src="img/6032cb36-587f-4366-89ef-aefed2546552.jpg" alt="">
                            </li>
                            <li>
                                <p class="sm">免费下载海量手机游戏<br>天天都有现金福利赠送</p>
                                <a href="">前往小米游戏商店</a>
                                <img src="img/more-game.jpg" alt="">
                            </li>
                        </ul>
                        <div class="bbttnn"><span class="clickleft2 glyphicon glyphicon-chevron-left"></span><span class="clickright2 glyphicon glyphicon-chevron-right"></span></div>
                    </li>
                    <li class="y4">
                        <p>应用</p>
                        <ul>
                            <li>
                                <h4>2017金米奖</h4>
                                <p class="sm">最优秀的应用和游戏</p>
                                <img src="img/3332da7d-4056-4694-9548-c83b7b3af7d3.jpg" alt="">
                            </li>
                            <li>
                                <h4>Forest</h4>
                                <p class="sm">帮助您专心与生活中每个重要时刻</p>
                                <p>免费</p>
                                <img src="img/T1TkKvBCKv1R4cSCrK.png" alt="">
                            </li>
                            <li>
                                <h4>小米应用</h4>
                                <p class="sm">小米出品 必属精品</p>
                                <p>免费</p>
                                <img src="img/T15VZvB5Kv1R4cSCrK.png" alt="">
                            </li>
                            <li>
                                <p class="sm">帮助小米手机和其他安卓手机用户<br>发现好用的安卓应用</p>
                                <a href="">前往小米应用商店</a>
                                <img src="img/more-app.jpg" alt="">
                            </li>
                        </ul>
                        <div class="bbttnn"><span class="clickleft3 glyphicon glyphicon-chevron-left"></span><span class="clickright3 glyphicon glyphicon-chevron-right"></span></div>
                    </li>
                </ul>
            </div>
        </section>



        <section class="sp">
            <h2 class="h2">视频</h2>
            <div class="ck">
                <div><span>产看全部</span><span class="glyphicon glyphicon-circle-arrow-right"></span></div>
            </div>
            <figure>
                <img src="img/xmad_14871526814173_kmTJB.jpg" alt="">
                <span class="glyphicon glyphicon-play"></span>
                <figcaption>
                    <p>红米Note 4X 环岛挑战</p>
                    <small>看看我们关于超长续航的疯狂想法</small>
                </figcaption>
            </figure>
            <figure>
                <img src="img/17a25056-f173-4c23-a09a-8762550114dd.jpg" alt="">
                <span class="glyphicon glyphicon-play"></span>
                <figcaption>
                    <p>小米之家里发生了一件怪事</p>
                    <small>World Order星机械人受邀访问地球</small>
                </figcaption>
            </figure>
            <figure>
                <img src="img/54c8d6f8-8a81-4853-8b19-857b77fac410.jpg" alt="">
                <span class="glyphicon glyphicon-play"></span>
                <figcaption>
                    <p>小米MIX 概念手机背后的故事</p>
                    <small>雷总亲自讲述小米MIX 的诞生</small>
                </figcaption>
            </figure>
            <figure>
                <img src="img/ffc09bd8-b0d6-4ebd-a9e0-6558f79e12de.jpg" alt="">
                <span class="glyphicon glyphicon-play"></span>
                <figcaption>
                    <p>一面科技，一面艺术</p>
                    <small>梁朝伟讲述双面人生</small>
                </figcaption>
            </figure>
        </section>
    </main>
    <header>
        <ul class="one">
            <li><span><img src="tp/edit.png" alt="">预约维修服务</span></li>
            <li><span><img src="tp/tui.png" alt="">7天无理由退货</span></li>
            <li><span><img src="tp/huan.png" alt="">15天免费换货</span></li>
            <li><span><img src="tp/gift.png" alt="">满150元包邮</span></li>
            <li><span><img src="tp/map.png" alt="">520余家售后网点</span></li>
        </ul>
        <hr>
        <div class="liebiao">
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd>售后政策</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>零售网点</dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>联系我们</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd>新浪微博</dd>
                <dd>小米部落</dd>
                <dd>官方微信</dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd>F 码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd>
            </dl>
            <div id='rightt'>
                <h4>400-820-08-820</h4>
                <p>周一至周日 8:00-18:00</p>
                <p>（仅收市话费）</p>
                <a href=""><span class="glyphicon glyphicon-envelope"></span>24小时在线客服</a>
            </div>
        </div>
        <div id="heade">
            <div class="head">
                <img src="tp/logo-footer.png" alt="">
                <div>
                    <ul>
                        <li><a href="javascript:;">小米商城</a> |</li>
                        <li><a href="javascript:;">MUI</a> |</li>
                        <li><a href="javascript:;">米聊</a> |</li>
                        <li><a href="javascript:;">多看书城</a> |</li>
                        <li><a href="javascript:;">小米路由器</a> |</li>
                        <li><a href="javascript:;">视频电话</a> |</li>
                        <li><a href="javascript:;">企业团购</a> |</li>
                        <li><a href="javascript:;">小米天猫店</a> |</li>
                        <li><a href="javascript:;">小米淘宝直营店</a> |</li>
                        <li><a href="javascript:;">小米网盟</a> |</li>
                        <li><a href="javascript:;">小米移动</a> |</li>
                        <li><a href="javascript:;">Celect Region</a></li>
                    </ul>
                    <p><span>©mi.com</span> 京ICP证110507号 <span>京ICP备10046444号</span> <span>京公网安备11010802020134号</span> <span>京网文[2014]0059-0009号</span>                        </p>
                    <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                </div>
                <ul class="zuihou">
                    <li><img src="img/truste.png" alt=""></li>
                    <li><img src="img/v-logo-2.png" alt=""></li>
                    <li><img src="img/v-logo-1.png" alt=""></li>
                    <li><img src="img/v-logo-3.png" alt=""></li>
                </ul>
                <div class="wwww">
                    <div class="img">
                        <img src="tp/slogan2016.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </header>
    <footer></footer>
</body>

</html>
<script>
    // 购物车
    $('.content').hover(function () {
        $('.parent').stop().animate({ height: 80 }, 500).show().text('购物车中还没有商品，请赶紧选购吧！')
        $('.next').css({'background-color':'#fff','color':'#f60'})
    }, function () {
        $(this).find('.parent').stop().animate({ height: 0 }, 300, function () {
            $('.parent').text('')
            $('.next').css({'bacground-color':'#555','color':'#bbb'})
        })
        console.log(this)
    })

    // 图片列表

    $('#nav ul li a').hover(function () {
        $('.last').animate({ height: 160 }, 500)
        $('.listbox').css({'box-shadow':' 0 3px 5px #999','border-top':'1px solid #eee','z-index':'9999','padding':'20px 0'})
    })
    // $('.last').mouseout(function(){
    //     $('.last').animate({ height: 0 }, 0)
    //     $('.listbox').css({'padding':'0 0','box-shadow':' 0 0px 0px #999','border-top':'none'})
    // })


    var arr = ['行', '不错', '挺好', 'good', '可以', '不赖', '中']
    $('.right-tp figure').hover(function () {
        $(this).find('.chonge').stop().animate({ top: 0 }, 500)
        var text = $(this).parents('li').index()
        console.log(text)
        $(this).find('.chonge p').text(arr[text])
    }, function () {
        $(this).find('.chonge').stop().animate({ top: 75 }, 300)
    })


    //明星单品
    var timer = setInterval(auto, 5000)
    var is = true
    function auto() {
        if (is == true) {
            $('.mxdp').find('.box').animate({ right: 1226 }, 500)
            $('.rr1').addClass('no').siblings().removeClass('no')
            is = false
        } else {
            $('.mxdp').find('.box').animate({ right: 0 }, 500)
            $('.ll1').addClass('no').siblings().removeClass('no')
            is = true
        }
    }
    $('.ll1').click(function () {
        $('.ll1').addClass('no').siblings().removeClass('no')
        $('.mxdp').find('.box').animate({ right: 0 }, 500)
    })
    $('.rr1').click(function () {
        $('.rr1').addClass('no').siblings().removeClass('no')
        $('.mxdp').find('.box').animate({ right: 1226 }, 500)
    })

    $('.ctrl').hover(function () {
        clearInterval(timer)
    }, function () {
        timer = setInterval(auto, 5000)
    })



    $('.left-lb').hover(function () {
        $('.letf-ul li').mouseover(function () {
            var index = $(this).index()
            $('#right-ul').find('div').eq(index).show().siblings().hide()
        })
    },function(){
        $(this).find('#right-ul').find('div').hide()
    })




    var indexx = 0
    $('.ll2').click(function () {
        indexx--
        if (indexx < 0) {
            indexx++
        }
        $('.tj').find('.box').animate({ right: 1226 * indexx }, 500)
    })
    $('.rr2').click(function () {
        indexx++
        if (indexx == 4) {
            indexx--
        }
        $('.tj').find('.box').animate({ right: 1226 * indexx }, 500)
    })


    $('.nr>div>ul>li').hover(function () {
        $(this).find('.bbttnn').stop().animate({ opacity: 1 }, 300)
    }, function () {
        $(this).find('.bbttnn').stop().animate({ opacity: 0 }, 300)
    })
    // var liindex = 0
    // $('.bbttnn span').eq(0).click(function () {
    //     console.log($(this).index())
    //     liindex++
    //     $(this).parents('div').siblings('ul').find('li').animate({ right: 290*liindex}, 500)
    // })
    // $('.bbttnn span').eq(1).click(function () {
    //     console.log($(this).index())
    //     liindex--
    //     $(this).parents('div').siblings('ul').find('li').animate({ right: 290*liindex}, 500)
    // })



    var left = 0;
    var index = 0;
    var left1 = 0;
    var index1 = 0;
    var left2 = 0;
    var index2 = 0;
    var left3 = 0;
    var index3 = 0;
    $(".clickleft").css('opacity', '0')
    $(".clickleft1").css('opacity', '0')
    $(".clickleft2").css('opacity', '0')
    $(".clickleft3").css('opacity', '0')
    $(".clickright").click(function () {
        left -= 290;
        index += 1
        var lenght = $(this).parents('div').siblings('ul').find('li').length
        console.log(lenght)
        if (left == -580) {
            $(".clickright").css('opacity', '0')
        } else {
            $(".clickright").css('opacity', '1')
        }
        if (left == 0) {
            $(".clickleft").css('opacity', '0')
        } else {
            $(".clickleft").css('opacity', '1')
        }
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left,
        }, 500)

    })
    $(".clickleft").click(function () {
        var lenght = $(this).parents('div').siblings('ul').find('li').length
        console.log(lenght)
        left += 290;
        index -= 1;
        if (left == -580) {
            $(".clickright").css('opacity', '0')
        } else {
            $(".clickright").css('opacity', '1')
        }
        if (left == 0) {
            $(".clickleft").css('opacity', '0')
        } else {
            $(".clickleft").css('opacity', '1')
        }
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left,
        }, 500)
    })



    $(".clickright1").click(function () {
        left1 -= 290;
        index1 += 1
        if (left1 == -870) {
            $(".clickright1").css('opacity', '0')
        } else {
            $(".clickright1").css('opacity', '1')
        }
        if (left1 == 0) {
            $(".clickleft1").css('opacity', '0')
        } else {
            $(".clickleft1").css('opacity', '1')
        }
        console.log(left1)
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left1,
        }, 500)
    })
    $(".clickleft1").click(function () {
        left1 += 290;
        index1 -= 1;
        if (left1 == -870) {
            $(".clickright1").css('opacity', '0')
        } else {
            $(".clickright1").css('opacity', '1')
        }
        if (left1 == 0) {
            $(".clickleft1").css('opacity', '0')
        } else {
            $(".clickleft1").css('opacity', '1')
        }
        console.log(left1)
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left1,
        }, 500)
    })


    $(".clickright2").click(function () {
        left2 -= 290;
        index2 += 1
        if (left2 == -870) {
            $(".clickright2").css('opacity', '0')
        } else {
            $(".clickright2").css('opacity', '1')
        }
        if (left2 == 0) {
            $(".clickleft2").css('opacity', '0')
        } else {
            $(".clickleft2").css('opacity', '1')
        }
        console.log(left2)
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left2,
        }, 500)
    })
    $(".clickleft2").click(function () {
        left2 += 290;
        index2 -= 1;
        if (left2 == -870) {
            $(".clickright2").css('opacity', '0')
        } else {
            $(".clickright2").css('opacity', '1')
        }
        if (left2 == 0) {
            $(".clickleft2").css('opacity', '0')
        } else {
            $(".clickleft2").css('opacity', '1')
        }
        console.log(left2)
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left2,
        }, 500)
    })


    $(".clickright3").click(function () {
        left3 -= 290;
        index3 += 1
        if (left3 == -870) {
            $(".clickright3").css('opacity', '0')
        } else {
            $(".clickright3").css('opacity', '1')
        }
        if (left3 == 0) {
            $(".clickleft3").css('opacity', '0')
        } else {
            $(".clickleft3").css('opacity', '1')
        }
        console.log(left)
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left3,
        }, 500)
    })
    $(".clickleft3").click(function () {
        left3 += 290;
        index3 -= 1;
        if (left3 == -870) {
            $(".clickright3").css('opacity', '0')
        } else {
            $(".clickright3").css('opacity', '1')
        }
        if (left3 == 0) {
            $(".clickleft3").css('opacity', '0')
        } else {
            $(".clickleft3").css('opacity', '1')
        }
        console.log(left3)
        $(this).parents('div').siblings('ul').find('li').stop().animate({
            left: left3,
        }, 500)
    })






















    // 视频
    $('.sp figure img').hover(function () {
        $(this).siblings('span').css({ 'background-color': '#f60', 'border': '3px solid #f60' })
    }, function () {
        $(this).siblings('span').css({ 'border': '3px solid snow' })
        $(this).siblings('span').css({ 'background-color': '#000' })
    })

</script>